<template>
    <view class="container">
        <!-- 顶部搜索栏 -->
        <view class="search-bar">
            <image class="icon back-btn" @click="gotoBack('Home')"
                src="">
            </image>
            <view class="search-input">
                <uni-icons type="search" size="16" color="#999"></uni-icons>
                <input type="text" placeholder="黄金手链" />
            </view>
        </view>

        <!-- 主内容区 -->
        <view class="main-content">
            <!-- 左侧分类导航 -->
            <view class="left-category">
                <view v-for="(item) in categories" :key="item.id"
                    :class="['category-item', currentCategory === item.id ? 'active' : '']"
                    @click="switchCategory(item.id)">
                    {{ item.title }}
                </view>
            </view>

            <!-- 右侧分类详情 -->
            <view class="right-content">
                <!-- 处理食品分类(0)的特殊情况：同时显示休闲食品和粮油调味 -->
                <template v-if="currentCategory === 0">
                    <!-- 遍历食品分类下的两个子分类：休闲食品和粮油调味 -->
                    <view v-for="(subCate, subIndex) in goodsType[currentCategory]" :key="subCate.keywordid">
                        <!-- 分类标题 -->
                        <view class="category-title">{{ subCate.secCateName }}</view>

                        <!-- 商品网格 -->
                        <view class="goods-grid">
                            <view class="goods-item" v-for="(goods, goodsIndex) in subCate.goodsList"
                                :key="goods.keywordId" @click="navigateToGoods(goods.url)">
                                <image :src="goods.imageUrl" mode="widthFix" class="goods-img"></image>
                                <text class="goods-name">{{ goods.keyword }}</text>
                            </view>
                        </view>
                    </view>
                </template>

                <!-- 其他分类的正常显示逻辑 -->
                <template v-else>
                    <!-- 遍历所有分类数据 -->
                    <view v-for="(it) in goodsType[currentCategory]" :key="it.keywordid">
                        <view class="category-title">{{ it.secCateName }}</view>
                        <view class="goods-grid">
                            <view class="goods-item" v-for="(goods) in it.goodsList" :key="goods.keywordId">
                                <image :src="goods.imageUrl" mode="widthFix" class="goods-img"></image>
                                <text class="goods-name">{{ goods.keyword }}</text>
                            </view>
                        </view>
                    </view>
                </template>
            </view>
        </view>
    </view>
</template>

<script>
import { leftNavigationBar, categoryData } from './data';
export default {
    data() {
        return {
            // 左侧分类列表
            categories: leftNavigationBar,
            goodsType: categoryData,// 保留原始分类数据引用
            currentCategory: 1, // 当前选中的分类索引
        };
    },
    methods: {
        // 切换分类
        switchCategory(index) {
            this.currentCategory = index;
        },

        // 返回首页
        gotoBack() {
            uni.switchTab({
                url: `/pages/Home/index`
            });
        },

        // 跳转到商品列表
        navigateToGoods(url) {
            uni.navigateTo({
                url: url
            });
        }
    }
};
</script>

<style scoped>
/* 样式保持不变 */
.container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #f5f5f5;
}

/* 搜索栏样式 */
.search-bar {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    background-color: #fff;
    border-bottom: 1px solid #eee;
}

.back-btn {
    width: 40px;
    height: 40px;
    margin-right: 10px;
}

.search-input {
    flex: 1;
    display: flex;
    align-items: center;
    background-color: #f5f5f5;
    border-radius: 20px;
    padding: 6px 16px;
}

.search-input input {
    margin-left: 8px;
    flex: 1;
    font-size: 14px;
    background-color: transparent;
    border: none;
    outline: none;
}

/* 主内容区样式 */
.main-content {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* 左侧分类导航 */
.left-category {
    width: 100px;
    background-color: #fafafa;
    overflow-y: auto;
}

.category-item {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #333;
    border-left: 3px solid transparent;
}

.category-item.active {
    background-color: #fff;
    color: #ff4d4f;
    border-left-color: #ff4d4f;
}

/* 右侧分类详情 */
.right-content {
    flex: 1;
    padding: 16px;
    background-color: #fff;
    overflow-y: auto;
}

.category-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 16px;
}

.goods-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 24px;
}

.goods-item {
    width: 33.333%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 16px;
}

.goods-img {
    width: 70px;
    height: 70px;
    border-radius: 8px;
    margin-bottom: 8px;
}

.goods-name {
    font-size: 12px;
    color: #333;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.empty-tip {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}
</style>